<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">系统信息列表</span>
          </div>
          <div class="header-right-wraper">
            <CButton
              color="info"
              class="system-btn-style"
              @click="addUser"
              data-permission="Btn_HomeIcon_Add"
            >
              <CIcon name="cil-plus" />&nbsp;系统信息
            </CButton>
          </div>
        </CCardHeader>

        <CCardBody>
          <div style="height: calc(100% - 45px)">
            <TableList
              ref="table"
              :getColumn="getColumns"
              :showPagination="false"
              :getAxios="getAxios"
            >
              <template v-slot:homeImage="item">
                <img :src="item.data.row.homeImage" />
              </template>
              <template v-slot:loginImage="item">
                <img :src="item.data.row.loginImage" />
              </template>
              <template v-slot:isShow="item">
                {{ item.data.row.isShow == "0" ? "不显示" : "显示" }}
              </template>
              <template v-slot:updateImage="item">
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_HomeIcon_Update"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle system-btn-style"
                  @click="del(item.data.row.id)"
                   data-permission="Btn_HomeIcon_Del"
                >
                  删除
                </CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>

        <!--  <CCardBody>
          <div class>
            <CDataTable :items="systemInfomationTableData" :fields="fields" hover border>
              <template #homeImage="{item}">
                <td align="center">
                  &lt;!&ndash; height="100px" width="100px" &ndash;&gt;
                  <img :src="item.homeImage" />
                </td>
              </template>
              <template #loginImage="{item}">
                <td align="center">
                  <img :src="item.loginImage" />
                </td>
              </template>
              <template #updateImage="{item}">
                <td align="center">
                  <CButton
                    title="编辑"
                    variant="outline"
                    class="textBtnStyle"
                    @click="update(item)"
                    data-permission="Btn_HomeIcon_Update"
                  >
                  编辑
                  </CButton>
                  <CButton
                    title="删除"
                    variant="outline"
                    class="textBtnStyle"
                    @click="del(item.id)"
                  >
                  删除
                  </CButton>
                </td>
              </template>
            </CDataTable>
          </div>
        </CCardBody>-->
      </CCard>
    </div>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除系统信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除系统信息</span>
      </p>
      <div class="modalBody">
        <p>删除系统信息时与系统信息相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="添加系统信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">添加系统信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="一级标题"
              placeholder="请输入一级标题"
              horizontal
              v-model="firstTitle"
            />
            <CInput
              label="二级标题"
              placeholder="请输入二级标题"
              horizontal
              v-model="secondTitle"
            />
            <CRow class="statu">
              <label class="label">是否显示</label>
              <CSelect
                class="input"
                placeholder="是否显示二级标题"
                :options="statuShow"
                :value.sync="isShow"
              />
            </CRow>
            <CInputFile
              label="首页图标"
              horizontal
              accept="image/*"
              @change="onChange($event)"
            />
            <p class="ipTestStyle" id="firstTest"></p>
            <CInputFile
              label="登录图标"
              horizontal
              accept="image/*"
              @change="twoChange($event)"
            />
            <p class="ipTestStyle" id="loginTest"></p>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk($event)" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="修改系统信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">修改系统信息</p>
      <CButtonClose slot="close" @click="updateCancel" />
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="一级标题"
              placeholder="请输入一级标题"
              horizontal
              v-model="updateFirstTitle"
            />
            <CInput
              label="二级标题"
              placeholder="请输入二级标题"
              horizontal
              v-model="updateSecondTitle"
            />
            <CRow class="statu">
              <label class="label">是否显示</label>
              <CSelect
                class="input"
                placeholder="是否显示二级标题"
                :options="statuShow"
                :value.sync="isShow"
              />
            </CRow>
            <CInputFile
              type="file"
              label="首页图标"
              horizontal
              accept="image/*"
              id="HomeIcon"
              @change="updateChangeFirst($event)"
            />

            <p class="ipTestStyle" id="updateFirstTest"></p>
            <CInputFile
              type="file"
              label="登录图标"
              horizontal
              id="loginIcon"
              accept="image/*"
              @change="updateChangeLogin($event)"
            />
            <p class="ipTestStyle" id="updateLoginTest"></p>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>
<script>
const fields = [
  {
    label: "一级标题",
    key: "firstTitle",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "二级标题",
    key: "secondTitle",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "首页图标",
    key: "homeImage",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "登录图标",
    key: "loginImage",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "是否显示二级标题",
    key: "isShow",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "操作",
    key: "updateImage",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
import TableList from "@/template/table/TableList";

export default {
  name: "homeIcon",
  components: { TableList },
  data() {
    return {
      isFlag: true, //用于识别上传的图片大小是否合格
      modalStyle: { top: "250px" },
      disabled: true,
      delShow: false,
      updateId: 0,
      updateShow: false,
      addShow: false,
      loading: true,
      systemInfomationTableData: [],
      clickId: "",
      fields,
      firstTitle: "",
      secondTitle: "",
      file: "",
      picture: {},
      picture2: {},
      updateFirstTitle: "",
      updateSecondTitle: "",
      updateHomeImage: {},
      updateLoginImage: {},
      updateApplicationId: systemId,
      statuShow: [
        {
          value: 1,
          label: "显示",
        },
        {
          value: 0,
          label: "不显示",
        },
      ],
      isShow: "",
      getColumns: [
        {
          title: "一级标题",
          key: "firstTitle",
          className: "centerText",
        },
        {
          title: "二级标题",
          key: "secondTitle",
          width: 180,
          className: "centerText",
        },
        {
          title: "首页图标",
          key: "homeImage",
          slot: "homeImage",
          className: "centerText",
        },
        {
          title: "登录图标",
          key: "loginImage",
          slot: "loginImage",
          width: 110,
          className: "centerText",
        },
        {
          title: "是否显示二级标题",
          key: "isShow",
          slot: "isShow",
          width: 180,
          className: "centerText",
        },
        {
          title: "操作",
          key: "updateImage",
          slot: "updateImage",
          width: 180,
          className: "centerText",
        },
      ],

      getAxios: {
        url: this.$api.manageApi.getHomeIcon, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  mounted() {
    // this.getAll();
  },
  methods: {
    /**
     * 点击编辑按钮，显示弹窗，获取id、一级标题和二级标题值
     */
    update(item) {
      this.updateShow = true;
      this.updateId = item.id;
      this.updateFirstTitle = item.firstTitle;
      this.updateSecondTitle = item.secondTitle;
      this.isShow = item.isShow;
    },
    /**
     * 点击删除按钮，显示弹窗，获取id值
     */
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    /**
     * 点击删除取消按钮，关闭弹窗
     */
    delCancel() {
      this.delShow = false;
    },
    /**
     * 删除功能，成功，关闭弹窗，界面渲染
     */
    delOk() {
      let path = this.$api.manageApi.homeIconDelete + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.getAll();
          this.$Message.success(res.data.message);
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.delShow = false;
    },
    /**
     * 编辑功能，成功，关闭弹窗，界面渲染
     */
    updateOk() {
      let _this = this;
      if (!this.isFlag) return;
      let path = this.$api.manageApi.homeIconUpdate + "/" + this.updateId;
      var formData = new FormData();
      formData.append("isShow", this.isShow);
      formData.append("applicationId", this.updateApplicationId);
      formData.append("firstTitle", this.updateFirstTitle);
      formData.append("secondTitle", this.updateSecondTitle);
      formData.append("homeFile", this.updateHomeImage);
      formData.append("loginFile", this.updateLoginImage);
      this.http
        .post(path, formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          this.updateShow = false;
          if (res.data.code == 0 && res.data.success) {
            this.getAll();
          } else {
            this.$Message.error(res.data.message);
          }
        });
    },
    /**
     * 修改首页图片功能，限制图片高度和宽度
     */
    updateChangeFirst(event) {
      /* 获取图片信息 */
      let _this = this;

      this.updateHomeImage = event[0];
      let imgSrc = window.URL.createObjectURL(event[0]);
      let img = new Image();
      img.src = imgSrc;

      /**
       * 判断图片高度和宽度,宽度小于等于480，高度小于等于60，选择成功；否则提示错误信息
       */
      img.onload = function () {
        if (img.width > 480 || img.height > 60) {
          let updateFirstTest = document.getElementById("updateFirstTest");
          updateFirstTest.innerHTML = "请选择最大宽度为480，高度为60的图片！";
          updateFirstTest.style.color = "red";

          _this.isFlag = false;
          _this.updateHomeImage = "";
        }
      };
    },
    /**
     * 修改登录页图片功能，限制图片高度和宽度
     */
    updateChangeLogin(event) {
      /* 获取图片信息 */
      let _this = this;
      this.updateLoginImage = event[0];
      let imgSrc = window.URL.createObjectURL(event[0]);
      let img = new Image();
      img.src = imgSrc;

      /**
       * 判断图片高度和宽度,宽度小于等于200，高度小于等于60，选择成功；否则提示错误信息
       */
      img.onload = function () {
        if (img.width <= 200 && img.height <= 60) {
        } else {
          let updateLoginTest = document.getElementById("updateLoginTest");
          updateLoginTest.innerHTML = "请选择最大宽度为200，高度为60的图片！";
          updateLoginTest.style.color = "red";
          _this.isFlag = false;
          this.updateLoginImage = "";
        }
      };
    },
    updateCancel() {
      this.updateShow = false;
      let element = document.getElementById("HomeIcon");
      element.value = "";
      let updateFirstTest = document.getElementById("updateFirstTest");
      updateFirstTest.innerHTML = "";

      let element1 = document.getElementById("loginIcon");
      element1.value = "";
      let updateLoginTest = document.getElementById("updateLoginTest");
      updateLoginTest.innerHTML = "";
    },

    /**
     * 上传首页图片功能，限制图片高度和宽度
     */
    onChange(event) {
      /* 获取图片信息 */
      let _this = this;
      this.picture = event[0];
      let imgSrc = window.URL.createObjectURL(event[0]);
      let img = new Image();
      img.src = imgSrc;

      /**
       * 判断图片高度和宽度,宽度小于等于480，高度小于等于60，选择成功；否则提示错误信息
       */
      img.onload = function () {
        if (img.width > 480 || img.height > 60) {
          let firstTest = document.getElementById("firstTest");
          firstTest.innerHTML = "请选择最大宽度为480，高度为60的图片！";
          firstTest.style.color = "red";
          _this.picture = "";
          _this.isFlag = false;
        }
      };
    },
    /**
     * 修改登录页图片功能，限制图片高度和宽度
     */
    twoChange(event) {
      /* 获取图片信息 */
      let _this = this;
      this.picture2 = event[0];
      let imgSrc = window.URL.createObjectURL(event[0]);
      let img = new Image();
      img.src = imgSrc;

      /**
       * 判断图片高度和宽度,宽度小于等于200，高度小于等于60，选择成功；否则提示错误信息
       */
      img.onload = function () {
        if (img.width <= 200 && img.height <= 60) {
        } else {
          let loginTest = document.getElementById("loginTest");
          loginTest.innerHTML = "请选择最大宽度为200，高度为60的图片！";
          loginTest.style.color = "red";

          this.picture2 = "";
          _this.isFlag = false;
        }
      };
    },

    addUser() {
      this.addShow = true;
    },
    /**
     * 上传标题、图片功能
     */
    addOk(event) {
      let self = this;
      let path = this.$api.manageApi.homeIconUpload;
      var formData = new FormData();
      formData.append("isShow", this.isShow);
      formData.append("applicationId", this.updateApplicationId);
      formData.append("firstTitle", this.firstTitle);
      formData.append("secondTitle", this.secondTitle);
      formData.append("homeFile", this.picture);
      formData.append("loginFile", this.picture2);

      this.http
        .post(path, formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
          if (res.data.code == 0) {
            self.getAll();
            this.$Message.success("添加成功");
          } else {
            this.$Message.error(res.data.message);
          }
        });
    },
    addCancel() {
      this.addShow = false;
    },
    /**
     * 显示表格信息
     */
    getAll() {
      let self = this;
      let path = this.$api.manageApi.getHomeIcon;
      self.data = [];
      var formData = new FormData();
      formData.append("isShow", this.isShow);
      formData.append("applicationId", this.updateApplicationId);
      formData.append("firstTitle", this.updateFirstTitle);
      formData.append("secondTitle", this.updateSecondTitle);
      formData.append("homeFile", this.picture);
      formData.append("loginFile", this.picture2);

      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(formData, getAxiosData);
    },
  },
  watch: {
    systemInfomationTableData(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
  },
};
</script>

<style scoped>
.col-xl-12 {
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (min-width: 1367px) {
}

.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.userTitle {
  margin-bottom: 0 !important;
}
.ipTestStyle {
  width: 250px;
  height: 2px;
  margin-top: -6px;
  margin-bottom: 16px;
  margin-left: 120px;
  font-size: 12px;
}
.input {
  width: 347px;
  margin-left: 64px;
  cursor: pointer;
}
.statu {
  margin-right: -5px;
  margin-left: -1px;
}
.label {
  margin-top: 8px;
}
</style>
<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.onButton:hover {
  color: white;
}
</style>
